<template>
  <el-result
      :icon="result.icon"
      :sub-title="result.subTitle"
      :title="result.title"
  >
    <template v-if="orderDetailsStore.order.cancel === 1" #extra>
      <el-button type="primary" @click="handelCancelOrder">取消取消订单</el-button>
    </template>
  </el-result>
</template>

<script setup>
import {computed} from "vue";
import {useRouter} from "vue-router";
import {useOrderDetailsStore} from "@/stores/order.js";
import {giveUpcancel} from "@/apis/order.js";

const router = useRouter()
const orderDetailsStore = useOrderDetailsStore()
const result = computed(() => {
  if (orderDetailsStore.order.cancel === 1) {
    return {
      title: "申请取消订单中",
      icon: "info",
      subTitle: "请等待商家结果"
    }
  } else {
    return {
      title: "取消订单成功",
      icon: "success",
      subTitle: "订单已取消，若已付款，将自动退款"
    }
  }
})
const handelCancelOrder = () => {
  giveUpcancel(orderDetailsStore.order.id).then(() => {
    ElMessage.success("取消成功")
    orderDetailsStore.order.cancel = 0
    router.push({name: "muterorder"})
  })
}
</script>